<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{
			padding: 0px;margin:0px;
		}
			img{
				width: 600px;
				opacity: 1;
				filter:alpha(opacity=100);
			}
			div{
				font-size: 12px;
				width:100px;
				height:100px;
				left:0px;
				background: red;
				margin-bottom: 10px;
				/*position: absolute;*/
			}
		</style>

	</head>
	<body>		
		<div>12345678</div>
		<div>12345678</div>
		<div>12345678</div>
		<div>12345678</div>
		<div style="width:1px;height:600px;background: #000;position: absolute;left:1000px;top:0px;"></div>
		<script type="text/javascript">
			function getstyle(obj,attr){
				if(obj.currentStyle){
					return obj.currentStyle[attr];
				}else{
					return getComputedStyle(obj)[attr];
				}
			}
			//var timer=null;//多物体定时器会出现冲突。每一个盒子添加一个定时器
			function move(obj,attr,target,fn){
				clearInterval(obj.timer);
				obj.timer=setInterval(function(){
					//求当前值
					var current=null;
					if(attr=='opacity'){
						current=Math.round(getstyle(obj,attr)*100);
					}else{
						current=parseInt(getstyle(obj,attr));
					}
					//判断速度
					var speed=(target-current)/7;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
					//判断定时器停止和输出
					if(current==target){
						clearInterval(obj.timer);
						fn&&fn();
					}else{
						if(attr=='opacity'){
							obj.style[attr]=(current+speed)/100;
							obj.style.filter='alpha(opacity='+(current+speed)+')';
						}else{
							obj.style[attr]=current+speed+'px';
						}
					}
				},20)
			}
			
			var oDiv=document.getElementsByTagName('div');
			for(var i=0;i<oDiv.length;i++){
				oDiv[i].onmouseover=function(){
					move(this,'width',1000);
				}
				oDiv[i].onmouseout=function(){
					move(this,'width',100);
				}
			}
		</script>
	</body>
</html>

